<template>
  <div class="layout-padding row justify-center">
    <div style="width: 600px; max-width: 100vw;">
       <q-gallery-carousel style="max-height:1280px;" dots  autoplay fullscreen :src="gooItem.attashments" />
       <q-list >
            <q-item>
              <q-item-main>
                <q-item-tile label lines="2">{{gooItem.name}}</q-item-tile>
                <br>
                <q-item-tile sublabel lines="1">
                    <span style="color:red;font-size: 1.2rem">
                        ￥{{gooItem.sellPrice}}
                    </span>
                    <span style="text-decoration: line-through">
                        ￥ {{gooItem.originPrice}}
                    </span>
                </q-item-tile>
                <br>
                <q-item-tile sublabel lines="1">
                  <q-icon name="favorite" s/>{{gooItem.recommendNo}}
                  <q-icon name="visibility"/>{{gooItem.pv}}
                  库存: {{gooItem.count}}
                </q-item-tile>
              </q-item-main>
              <q-item-side>
                  <q-btn flat round small color="primary" @click="shareAction" icon="share"/>
              </q-item-side>
              
          </q-item>
          <q-item-separator />
          <q-list-header>商品规格</q-list-header>
          <q-item>
               <q-item-tile sublabel>购买数量</q-item-tile>
               <q-item-tile label color="secondary">({{buycount}})</q-item-tile>
                <q-item-main>
                  <q-slider v-model="buycount" :min="1" :max="50" label  />
                </q-item-main>
          </q-item>
          <q-item>
                <q-item-tile sublabel>颜色</q-item-tile>
          </q-item>
          <q-item>
               <q-item-tile sublabel>大小</q-item-tile>
          </q-item>
          <q-item-separator />
          <q-list-header>商品详情</q-list-header>
          <q-item>
                <q-item-main>
                    细数走过的岁月，欢乐伴着忧伤。在时光的深处中，最美的永远艳丽多彩不褪色，那些伤痛，时间久了也就模糊不清，
                    留下的记忆也是残缺碎片。遇到不满意时，总会拿过去的好作比较，留恋过去，讨厌现在，始不知过去也是现在，
                    现在也会过去。行走红尘人间，做个随遇而安的草木女子，让清风拂袖，心香暖怀。生命的旅途，总会有千回百转，
                    悲喜寒凉，季节的辗转，绮丽的风景。若是懂得，这都是生活赋予的美好。有些人，有些事，也许进了你的眼，
                    滑过你的心，又悄然的溜走了，也许只为相遇，留一道风景。把路途的美景丰盈心灵，化一道属于自己的
                </q-item-main>
          </q-item>
      </q-list>
         <!-- 回到顶部 -->
      <q-fixed-position corner="bottom-right" :offset="[20, 80]">
        <q-btn
          color="primary"
          round
          @click="toCargo"
          icon="add shopping cart"/>
      </q-fixed-position>
       <q-fixed-position corner="bottom-right" :offset="[20, 20]">
        <q-btn
          color="primary"
          round
          @click="toPay"
          icon="monetization on"/>
      </q-fixed-position>
    </div>
  </div>
</template>

<script>
import {
  QIcon,
  QGalleryCarousel,
  QList,
  QListHeader,
  QItem,
  QItemSeparator,
  QItemSide,
  QItemMain,
  QItemTile,
  ActionSheet,
  QBtn,
  QFixedPosition,
  QField,
  QInput,
  QSlider,
} from "quasar";

export default {
  components: {
    QIcon,
    QGalleryCarousel,
    QList,
    QListHeader,
    QItem,
    QItemSeparator,
    QItemSide,
    QItemMain,
    QItemTile,
      ActionSheet,
  QBtn,
  QFixedPosition,
    QField,
    QInput,
    QSlider,
  },
  data() {
    return {
      buycount:1,
      gooItem: {
        id: 2,
        name: "春季特款流行潮流男装",
        attashments: ["statics/test001.jpg","statics/test002.jpg", "statics/test003.jpg"],
        originPrice: 399,
        sellPrice: 198.99,
        recommendNo: 123,
        pv: 12555,
        count:120
      }
    };
  },
  methods: {
    toCargo() {
      console.log('加入到购物车');
      
    },
    toPay() {
      console.log('去结算');
      
    },
    shareAction() {
      //分享操作
      ActionSheet.create({
        gallery: true,
        actions: [
          {
            label: "好友",
            icon: "person",
            handler() {}
          },
          {
            label: "收藏",
            icon: "favorite",
            handler() {}
          }
        ],
        dismiss: {
          label: "Cancel",
          handler() {}
        }
      });
    },
  }
};
</script>
